<template>
  <a-modal class="common-modal" title="{{$t('basicData.color') }}{{ $t('basicData.size') }}{{$t('other.disposition')}}" :footer="null" :width="550" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <section class="p-20">
      <div class='blue-line mb-20'>{{$t('basicData.color') }}{{ $t('other.disposition') }}</div>
      <a-form ref="colorForm" :model="colorData">
        <a-table rowKey="id" bordered size="small" :dataSource="colorData" :columns="colorColumns" :pagination="false" class="form-table">
          <template #headerCell="{ column }">
            <template v-if="column.key === 'color'">
              <span class="text-red">*</span>{{$t('basicData.color')}}
            </template>
          </template>
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'color'">
              <a-form-item :name="[index, 'color']" :rules="{ required: true, message: $t('other.selectColor')}">
                <a-select v-model:value.trim="record.color" placeholder="{{$t('other.selectColor')}}">
                  <a-select-option v-for="item in colorList" :disabled="getDisabledColorOption(item.code)" :key="item.key" :value="item.code">{{item.nameCodeValue}}</a-select-option>
                </a-select>
              </a-form-item>
            </template>
            <template v-else-if="column.key === 'operate'">
              <span class="table-operate-container">
                <a-button type="link" class="primary-link" @click="handleAdd('color')">{{ $t('common.addNew') }}</a-button>
                <a-divider type="vertical" />
                <a-button type="link" class="warning-link" :disabled="colorData.length === 1" @click="handleDelete(record.id, 'color')">{{ $t('common.del') }}</a-button>
              </span>
            </template>
          </template>
        </a-table>
      </a-form>

      <div class='blue-line mb-20  mt-30'>{{ $t('basicData.size') }}{{ $t('other.disposition') }}</div>
      <a-form ref="sizeForm" :model="sizeData">
        <a-table rowKey="id" bordered size="small" :dataSource="sizeData" :columns="sizeColumns" :pagination="false" class="form-table">
          <template #headerCell="{ column }">
            <template v-if="column.key === 'size'">
              <span class="text-red">*</span>{{ $t('other.dimension') }}
            </template>
          </template>
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'size'">
              <a-form-item :name="[index, 'size']" :rules="{ required: true, message: $t('other.pleaseSelectDimension')}">
                <a-select v-model:value.trim="record.size" placeholder="{{$t('other.pleaseSelectDimension')}}">
                  <a-select-option v-for="item in sizeList" :disabled="getDisabledSizeOption(item.code)" :key="item.key" :value="item.code">{{item.nameCodeValue}}</a-select-option>
                </a-select>
              </a-form-item>
            </template>
            <template v-else-if="column.key === 'operate'">
              <span class="table-operate-container">
                <a-button type="link" class="primary-link" @click="handleAdd('size')">{{ $t('common.addNew') }}</a-button>
                <a-divider type="vertical" />
                <a-button type="link" class="warning-link" :disabled="sizeData.length === 1" @click="handleDelete(record.id, 'size')">{{ $t('common.del') }}</a-button>
              </span>
            </template>
          </template>
        </a-table>
      </a-form>
    </section>
    <div class="common-modal-footer">
      <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
      <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
    </div>
  </a-modal>
</template>
<script setup name="configTableModel">
import { colorColumns, sizeColumns } from './makeConfig'
import { ref, onMounted, computed } from 'vue'
import { store } from '@/store'
const emits = defineEmits(['ok'])
const colorList = computed(() => {
  (store.state.normalData.colorList || []).forEach(i => { i.nameCodeValue = `${i.name}-${i.code}` })
  return store.state.normalData.colorList
})
const sizeList = computed(() => {
  (store.state.normalData.sizeList || []).forEach(i => { i.nameCodeValue = `${i.name}-${i.code}` })
  return store.state.normalData.sizeList
})
let visible = ref(false)
let colorData = ref([])
let sizeData = ref([])
let colorForm = ref()
let sizeForm = ref()
const open = (colorList, sizeList) => {
  initModal(colorList, sizeList)
  visible.value = true
}
const initModal = (colorList, sizeList) => {
  colorData.value = colorList.length ? colorList.map(item => ({ id: Math.random(), color: item.code })) : [{ id: Math.random(), color: undefined }]
  sizeData.value = sizeList.length ? sizeList.map(item => ({ id: Math.random(), size: item.code })) : [{ id: Math.random(), size: undefined }]
}
const handleOk = async () => {
  try {
    await colorForm.value.validateFields()
    await sizeForm.value.validateFields();
    const addColor = colorList.value.filter(i => colorData.value.map(el => el.color).includes(i.code))
    const addSize = sizeList.value.filter(i => sizeData.value.map(el => el.size).includes(i.code))
    emits('ok', addColor, addSize)
    handleCancel()
  } catch {
    console.log('err');
  }
}
const getDisabledColorOption = (code) => {
  const selectList = colorData.value.map(item => item.color)
  return selectList.includes(code)
}
const getDisabledSizeOption = (code) => {
  const selectList = sizeData.value.map(item => item.size)
  return selectList.includes(code)
}
const handleCancel = () => {
  visible.value = false
}
const handleAdd = (type) => {
  if (type == 'color') {
    colorData.value.push({ color: undefined, id: Math.random() })
  } else {
    sizeData.value.push({ size: undefined, id: Math.random() })
  }
}
const handleDelete = (id, type) => {
  if (type == 'color') {
    const dataList = colorData.value.filter(item => item.id !== id)
    colorData.value = dataList
  } else {
    const dataList = sizeData.value.filter(item => item.id !== id)
    sizeData.value = dataList
  }
}

onMounted(async () => {
  await store.dispatch('getSize')
  await store.dispatch('getColor')
})

defineExpose({
  open
})
</script>
